{include file="public/header296"}
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-row">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <form class="layui-form" lay-filter="layui-app-form" id="layui-app-form" style="display:none" >
                            <div class="layui-form-item" style="margin-top: 20px">
                                <div class="layui-inline">
                                    <label class="layui-form-label">名称</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="name" id="name" lay-verify="required" class="layui-input"/>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">状态</label>
                                    <div class="layui-input-inline">
                                        <input type="checkbox" name="status" id="status" lay-skin="switch" lay-filter="switchStatus" lay-text="显示|隐藏" checked class="layui-input" />
                                    </div>
                                </div>
                            </div>
                        </form>
                        <script type="text/html" id="table-content-list">
                            <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon">编辑</i></a>
                            <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete"><i class="layui-icon">删除</i></a>
                        </script>
                        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                            <ul class="layui-tab-title">
                                <li class="layui-this" >技术类标签</li>
                                <li>功能类标签</li>
                            </ul>
                            <div class="layui-tab-content">
                                <div class="layui-tab-item layui-show">
                                    <div class="layui-card-body">
                                        <div style="padding-bottom: 10px;">
                                            <button class="layui-btn layuiadmin-btn-list" data-type="add" data-id="1" data-render="LAY-app-content-list">添加</button>
                                        </div>
                                        <table id="LAY-app-content-list" lay-filter="LAY-app-content-list"></table>
                                    </div>
                                </div>
                                <!-- 功能类 -->
                                <div class="layui-tab-item">
                                    <div class="layui-card-body">
                                        <div style="padding-bottom: 10px;">
                                            <button class="layui-btn layuiadmin-btn-list" data-type="add" data-id="2" data-render="LAY-app-content-type2-list">添加</button>
                                        </div>
                                        <table id="LAY-app-content-type2-list" lay-filter="LAY-app-content-type2-list"></table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['layer', 'table', 'form', 'element'], function () {
        var $ = layui.$
                , table = layui.table
                , element = layui.element
                , form = layui.form;
        form.render();
        table.render({
            elem: '#LAY-app-content-list'
            , url: "{:url('tag/getTagList')}"
            , where:{type:1}
            , request: {
                pageName: 'page',
                limitName: 'page_size'
            }
            , page: {
                layout: ['limit', 'count', 'prev', 'page', 'next']
                , first: '首页'
                , last: '尾页'
                , limit: 10
            }
            , cellMinWidth: 120
            , cols: [[
                {field: 'id', title: "ID", width: 80 },
                {field: 'name', title: "名称",align:'center'},
                {field: 'status', title: '状态', minWidth: 40, templet: function (d) {
                    if (d.status) {
                        return '<button class="layui-btn layui-btn-xs">显示</button>';
                    } else{
                        return '<button class="layui-btn layui-btn-xs layui-btn-primary">隐藏</button>';
                    }
                }},
                {title: '操作', minWidth: 120, align: 'center', fixed: 'right', toolbar: '#table-content-list'}
            ]]
            , text: {
                none: '暂无相关数据'
            }
        });
        // 监控tab标签
        element.on('tab(docDemoTabBrief)', function(data){
            var index = data.index;
            switch (index) {
                case 1:
                    table.render({
                        elem: '#LAY-app-content-type2-list'
                        , url: "{:url('tag/getTagList')}"
                        , where:{type:2}
                        , request: {
                            pageName: 'page',
                            limitName: 'page_size'
                        }
                        , page: {
                            layout: ['limit', 'count', 'prev', 'page', 'next']
                            , first: '首页'
                            , last: '尾页'
                            , limit: 10
                        }
                        , cellMinWidth: 120
                        , cols: [[
                            {field: 'id', title: "ID", width: 80 },
                            {field: 'name', title: "专业",align:'center'},
                            {field: 'status', title: '状态', minWidth: 40, templet: function (d) {
                                if (d.status) {
                                    return '<button class="layui-btn layui-btn-xs">显示</button>';
                                } else{
                                    return '<button class="layui-btn layui-btn-xs layui-btn-primary">隐藏</button>';
                                }
                            }},
                            {title: '操作', minWidth: 120, align: 'center', fixed: 'right', toolbar: '#table-content-list'}
                        ]]
                        , text: {
                            none: '暂无相关数据'
                        }
                    });
                    break;
            }
        });

        // 监听行工具事件
        table.on('tool(LAY-app-content-list)', function (obj) {
            var data = obj.data
                    , layEvent = obj.event;
            if (layEvent == 'delete') {
                layer.confirm("是否删除此条内容？", function () {
                    $.post("{:url('tag/delete')}", {id:data.id}, function (res) {
                        if (res.code == 0) {
                            obj.del();
                            layer.msg(res.msg, {icon: 1});
                        } else {
                            layer.msg(res.msg, {icon: 5});
                        }
                    });
                });
            } else if(layEvent == 'edit'){
                $("#name").val(data.name);
                if (data.status) {
                    $("input[name='status']").prop("checked", true);
                } else {
                    $("input[name='status']").prop("checked", false);
                }
                form.render();
                layer.open({
                    type:1,
                    skin: 'demo-class',
                    area:['400px','400px'],
                    title: '编辑',
                    content: $("#layui-app-form"),
                    shade: 0,
                    btn: ['确定', '取消'],
                    yes: function(){
                        var name = $('#name').val();
                        if (name == ''){
                            return layer.msg('名称不能为空', {icon: 5});
                        }
                        var status = $('input:checkbox[name="status"]:checked').val()
                        if (!status || status == undefined) {
                            status = 0;
                        } else {
                            status = 1;
                        }
                        $.post("{:url('tag/edit')}", {id:data.id, type:data.type, name:name, status:status}, function (res) {
                            if (res.code == 0) {
                                layer.msg(res.msg, {icon: 1});
                                table.reload('LAY-app-content-list');
                                $("#layui-app-form")[0].reset();
                                layer.closeAll();
                            } else {
                                layer.msg(res.msg, {icon: 5});
                            }
                        });
                    },
                    btn2: function(){
                        $("#layui-app-form")[0].reset();
                        layer.closeAll();
                    },
                    cancel: function(){
                        $("#layui-app-form")[0].reset();
                        layer.closeAll();
                    }
                });
            }
        });
        table.on('tool(LAY-app-content-type2-list)', function (obj) {
            var data = obj.data
                    , layEvent = obj.event;
            if (layEvent == 'delete') {
                layer.confirm("是否删除此条内容？", function () {
                    $.post("{:url('tag/delete')}", {id:data.id}, function (res) {
                        if (res.code == 0) {
                            obj.del();
                            layer.msg(res.msg, {icon: 1});
                        } else {
                            layer.msg(res.msg, {icon: 5});
                        }
                    });
                });
            } else if(layEvent == 'edit'){
                $("#name").val(data.name);
                if (data.status) {
                    $("input[name='status']").prop("checked", true);
                } else {
                    $("input[name='status']").prop("checked", false);
                }
                form.render();
                layer.open({
                    type:1,
                    skin: 'demo-class',
                    area:['400px','400px'],
                    title: '编辑',
                    content: $("#layui-app-form"),
                    shade: 0,
                    btn: ['确定', '取消'],
                    yes: function(){
                        var name = $('#name').val();
                        if (name == ''){
                            return layer.msg('名称不能为空', {icon: 5});
                        }
                        var status = $('input:checkbox[name="status"]:checked').val()
                        if (!status || status == undefined) {
                            status = 0;
                        } else {
                            status = 1;
                        }
                        $.post("{:url('tag/edit')}", {id:data.id, type:data.type, name:name, status:status}, function (res) {
                            if (res.code == 0) {
                                layer.msg(res.msg, {icon: 1});
                                table.reload('LAY-app-content-type2-list');
                                $("#layui-app-form")[0].reset();
                                layer.closeAll();
                            } else {
                                layer.msg(res.msg, {icon: 5});
                            }
                        });
                    },
                    btn2: function(){
                        $("#layui-app-form")[0].reset();
                        layer.closeAll();
                    },
                    cancel: function(){
                        $("#layui-app-form")[0].reset();
                        layer.closeAll();
                    }
                });
            }
        });

        var $ = layui.$, active = {
            add: function(){
                var type = $(this).data('id');
                var render = $(this).data('render');
                layer.open({
                    type:1,
                    skin: 'demo-class',
                    area:['400px','400px'],
                    title: "添加",
                    content: $("#layui-app-form"),
                    shade: 0,
                    btn: ['确定', '取消'],
                    yes: function(){
                        var name = $('#name').val();
                        if (name == ''){
                            layer.msg('名称不能为空', {icon: 5});
                            return false;
                        }
                        var status = $('input:checkbox[name="status"]:checked').val()
                        if (!status || status == undefined) {
                            status = 0;
                        } else {
                            status = 1;
                        }
                        $.post("{:url('tag/edit')}", {type:type,name:name,status:status}, function (res) {
                            if (res.code == 0) {
                                layer.msg(res.msg, {icon: 1});
                                $("#layui-app-form")[0].reset();
                                table.reload(render);
                                layer.closeAll();
                            } else {
                                layer.msg(res.msg, {icon: 5});
                            }
                        });
                    },
                    btn2: function(){
                        $("#layui-app-form")[0].reset();
                        layer.closeAll();
                    },
                    cancel: function(){
                        $("#layui-app-form")[0].reset();
                        layer.closeAll();
                    }
                });
            },
        };

        $('.layui-btn.layuiadmin-btn-list').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>
{include file="public/footer"}